<div class="mat-elevation-z8">
  <div>
    <!-- Title -->
    <mat-icon class="Search">search</mat-icon>搜尋

    <!-- Filter menuId Column -->
    <mat-form-field class="MenuNum">
      <input matInput [formControl]="menuIdFilter" placeholder="Filter Id" [matAutocomplete]="autoMenuId">
      <mat-autocomplete #autoMenuId="matAutocomplete">
        <mat-option *ngFor="let option of menuIdFilteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
      <mat-label>
        <mat-icon class="Search">search</mat-icon>ID
      </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filter path Column -->
    <mat-form-field>
      <input matInput [formControl]="pathFilter" placeholder="Filter 路徑" [matAutocomplete]="autoPath">
      <mat-autocomplete #autoPath="matAutocomplete">
        <mat-option *ngFor="let option of pathFilteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
      <mat-label>
        <mat-icon class="Search">search</mat-icon>路徑
      </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filte menuText Column -->
    <mat-form-field>
      <input matInput [formControl]="menuTextFilter" placeholder="Filter 名稱" [matAutocomplete]="autoMenuText">
      <mat-autocomplete #autoMenuText="matAutocomplete">
        <mat-option *ngFor="let option of menuTextFilteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
      <mat-label>
        <mat-icon class="Search">search</mat-icon>名稱
      </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filter sortNo Column -->
    <mat-form-field class="MenuNum">
      <input matInput [formControl]="sortNoFilter" placeholder="Filter 排序" [matAutocomplete]="autoSortNo">
      <mat-autocomplete #autoSortNo="matAutocomplete">
        <mat-option *ngFor="let option of sortNoFilteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
      <mat-label>
        <mat-icon class="Search">search</mat-icon>排序
      </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filter selector Column -->
    <mat-form-field>
      <input matInput [formControl]="selectorFilter" placeholder="Filter 標籤" [matAutocomplete]="autoSelector">
      <mat-autocomplete #autoSelector="matAutocomplete">
        <mat-option *ngFor="let option of selectorFilteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
      <mat-label>
        <mat-icon class="Search">search</mat-icon>標籤
      </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filter component Column -->
    <mat-form-field>
      <input matInput [formControl]="componentFilter" placeholder="Filter 對應元件" [matAutocomplete]="autoComponent">
      <mat-autocomplete #autoComponent="matAutocomplete">
        <mat-option *ngFor="let option of componentFilteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
      <mat-label>
        <mat-icon class="Search">search</mat-icon>對應元件
      </mat-label>
    </mat-form-field>&nbsp;

    <!-- Filter rootMenuId Column -->
    <mat-form-field class="MenuNum">
      <input matInput [formControl]="rootMenuIdFilter" placeholder="Filter 隸屬" [matAutocomplete]="autoRootMenuId">
      <mat-autocomplete #autoRootMenuId="matAutocomplete">
        <mat-option *ngFor="let option of rootMenuIdFilteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
      <mat-label>
        <mat-icon class="Search">search</mat-icon>隸屬
      </mat-label>
    </mat-form-field>
  </div>

  <table mat-table #table [dataSource]="dataSource" matSort>

    <!-- Note that these columns can be defined in any order.
       The actual rendered columns are set as a property on the row definition" -->

    <!-- menuId Column -->
    <ng-container matColumnDef="menuId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        ID
      </th>
      <td mat-cell *matCellDef="let element"> {{element.menuId}} </td>
    </ng-container>

    <!-- path Column -->
    <ng-container matColumnDef="path">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 路徑 </th>
      <td mat-cell *matCellDef="let element"> {{element.path}} </td>
    </ng-container>

    <!-- menuText Column -->
    <ng-container matColumnDef="menuText">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 名稱 </th>
      <td mat-cell *matCellDef="let element"> {{element.menuText}} </td>
    </ng-container>

    <!-- sortNo Column -->
    <ng-container matColumnDef="sortNo">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 排序 </th>
      <td mat-cell *matCellDef="let element"> {{element.sortNo}} </td>
    </ng-container>

    <!-- selector Column -->
    <ng-container matColumnDef="selector">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 標籤 </th>
      <td mat-cell *matCellDef="let element"> {{element.selector}} </td>
    </ng-container>

    <!-- component Column -->
    <ng-container matColumnDef="component">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 對應元件 </th>
      <td mat-cell *matCellDef="let element"> {{element.component}} </td>
    </ng-container>

    <!-- rootMenuId Column -->
    <ng-container matColumnDef="rootMenuId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 隸屬 </th>
      <td mat-cell *matCellDef="let element"> {{element.rootMenuId}} </td>
    </ng-container>

    <!-- actions -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef class="actions">
        <button mat-icon-button class="TableButton" (click)="openCreateDialog()">
          <mat-icon>add</mat-icon>
        </button>&nbsp;
        <button mat-icon-button class="TableButton" (click)="loadData()">
          <mat-icon>refresh</mat-icon>
        </button>
      </th>
      <td mat-cell *matCellDef="let row; let i=index;" class="actions">
        <button mat-icon-button class="TableButton" (click)="openUpdateDialog(row)">
          <mat-icon>edit</mat-icon>
        </button>&nbsp;
        <button mat-icon-button class="TableButton" (click)="openDeleteDialog(row)">
          <mat-icon>delete_forever</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <div class="no-results" [style.display]="paginator.length == 0 ? '' : 'none'">
    No results
  </div>

  <mat-paginator #paginator showFirstLastButtons [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
  </mat-paginator>

</div>